<template>
    <div class="goods_contain">


        <van-swipe :autoplay="3000" indicator-color="white" class="swiper_pic bgc">
        <van-swipe-item v-for="item in goods_pic_list" :key="item.imgUrl" class="swiper_item">
            <van-tag mark type="danger" size='large' class="goods_tag">{{introduceMsg.discount}}折</van-tag>
            <img :src="item.imgUrl">
        </van-swipe-item>
        </van-swipe>


        <div class="introduce bgc">
            <h3>{{introduceMsg.name}}</h3>
            <hr>
            <p>
                市场价：<span class="del"> ¥ {{introduceMsg.privilegePrice}}</span>
                
                销售价：<span class="red"> ¥ {{introduceMsg.price}}</span>
            </p>
            <div class="quantity">
                <span>购买数量：</span>
                <van-stepper v-model="count" />

            </div>
        </div>


        <van-goods-action class="aaaaaaa">
                <van-goods-action-icon icon="star-o" text="收藏" @click="collection($event)"/>
                <van-goods-action-icon icon="cart-o" text="购物车" :info="$store.getters.getQuantity" @click="toCar" />
                <van-goods-action-button type="warning" text="加入购物车" @click="addCar" />
                <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
        </van-goods-action>



    </div>
</template>

<script>

import Vue from 'vue';

import { Swipe, SwipeItem,Stepper,GoodsAction,GoodsActionIcon,GoodsActionButton,Toast,Icon,CouponCell, CouponList,Tag } from 'vant'

Vue.use(Swipe).use(SwipeItem).use(Stepper).use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(Toast).use(Icon).use(CouponCell).use(CouponList).use(Tag)



export default {
    data(){
        return{
            introduceMsg:{},
            goods_pic_list:[],
            count:1
        }
    },
    methods:{
        getGoodsDetails(){
            // console.log(this.$route.query.id)
            this.goods_id = this.$route.query.id
            let _this = this
            _this.$axios.get('https://100boot.cn/wxShop/goods/getGoodsInfo?key=fc821a2187254f91b0596176847bc858&goodsId='+_this.$route.query.id).then(res=>{
                // console.log(res.data)
                _this.introduceMsg = res.data.result
                _this.goods_pic_list = res.data.result.shopGoodsImageList
            })
        },
        onClickIcon() {
            Toast('点击图标');
            },
        onClickButton() {
            Toast('点击按钮');
            },
        addCar(){
            let goods_info = {
                id:this.introduceMsg.id,
                count:this.count,
                selected:false,
                goodsMsg:this.introduceMsg
            }

            this.$store.commit('addToCar',goods_info)
            // console.log(this.count)
        },
        toCar(){
            this.$router.push('/car')
        },
        collection(e){
            e.target.style.color = 'red'
        }

    },
    created(){
        this.getGoodsDetails()
    }
}
</script>

<style lang="less" scoped>

.del{
    text-decoration: line-through; 
    margin-right: 20px;
}

.red{
    color: red
}

.bgc{
    width: 94%;
    background-color: #fff;
    margin: 11px auto;
    box-shadow: 0 0 5px 5px #ccc;
}

.goods_contain{
        // background-color: #f1f1f1;
        padding-bottom: 0;
        .swiper_pic{
                z-index: 0;
                .swiper_item{
                    text-align: center;
                    img{
                    width: 60%;
                    vertical-align: bottom;
                    }
                    .goods_tag{
                        position: absolute;
                        left: 0;
                        top: 20px;
                    }
                }
            }

        .introduce{
            // height: 100px;
            padding: 5px;
            box-sizing: border-box;
            .quantity{
                display: flex;
            }
        }

        .aaaaaaa{
            z-index: 10000;
            bottom: 50px;
            box-shadow: 0 -4px 4px #ccc;
        }

}



    
</style>